<template>
  <a-col :span="18" style="border-left: 1px solid #e8e8e8">
    <a-col :span="24" style="border-bottom: 1px solid #e8e8e8;padding: 20px 20px 10px 20px">
      <div v-if="showFavoritesName">
        <span style="font-weight: 400;font-size: 18px;margin-right: 10px;font-family: Consolas">
          {{ favoritesData.name }}
        </span>
        <a-icon type="form" @click="showFavoritesName = false" v-if="favoritesData.name !== '默认收藏夹'"/>
      </div>
      <div v-else>
        <a-input v-model="favoritesData.name" placeholder="small size" style="width: 40%;"/>
        <a-button type="primary" shape="circle" icon="check" style="margin-left: 20px"
                  @click="clickFavoritesName(favoritesData)"
        />
        <a-button type="danger" shape="circle" icon="close" style="margin-left: 15px"
                  @click="showFavoritesName = true"
        />
      </div>
      <div style="margin-top: 10px">
        <div style="float: left" v-if="showArticleDescribe">
          <span style="margin-right: 10px" v-if="favoritesData.articleDescribe">{{
              favoritesData.articleDescribe
            }}</span>
          <span style="margin-right: 10px" v-else>请添加收藏夹描述</span>
          <a-icon type="form" @click="showArticleDescribe = false" v-if="favoritesData.name !== '默认收藏夹'"/>
        </div>
        <div v-else>
          <a-input v-model="favoritesData.articleDescribe" placeholder="请添加收藏夹描述" style="width: 40%;"/>
          <a-button type="primary" shape="circle" icon="check" style="margin-left: 20px"
                    @click="clickrticleDescribe(favoritesData)"
          />
          <a-button type="danger" shape="circle" icon="close" style="margin-left: 15px"
                    @click="showArticleDescribe = true"
          />
        </div>
        <div style="float: right" v-if="!isCheckbox">
          <template v-if="favoritesData.name !== '默认收藏夹'">
            <a-button type="link" @click="deleteFavorites(favoritesData.id)">
              删除收藏夹
            </a-button>
            <a-divider type="vertical"/>
          </template>

          <a-button type="link" @click="isCheckbox = true">
            批量移动
          </a-button>
        </div>
        <div style="float: right" v-else>
          <a-button type="link" @click="moveFavorites">
            移至其他收藏夹
          </a-button>
          <a-divider type="vertical"/>
          <a-button type="link" @click="noMove">
            退出
          </a-button>
        </div>
      </div>
    </a-col>
    <a-col :span="24" v-if="showList">
      <a-list
        class="MyFavoritesList"
        :loading="loading"
        item-layout="horizontal"
        :data-source="articleFavoritesList"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a slot="actions">
            <a-tooltip placement="top" title="取消收藏">
              <a-icon type="star" style="color: #ffba00;font-size: 20px"
                      @click="cancelCollection( item.articleId)"
              />
            </a-tooltip>
          </a>
          <a-list-item-meta
            :description="item.createTime"
          >
            <a slot="title" :href="'/articleDetails/'+item.articleId">{{ item.articleId_dictText }}</a>
            <a-avatar

              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
            <a-checkbox @change="onChange(item.articleId)" slot="avatar" v-if="isCheckbox"/>
          </a-list-item-meta>
          <!--          <div>content</div>-->
        </a-list-item>
      </a-list>
    </a-col>
    <move-favorites-modal ref="MoveFavoritesModal" @ok="moveFavoritesOk"/>
  </a-col>
</template>

<script>
import { deleteAction, getAction, putAction } from '@/api/manage'
import MoveFavoritesModal from './MoveFavoritesModal'

export default {
  name: 'MyFavoritesDetails',
  components: {
    MoveFavoritesModal
  },
  data() {
    return {
      articleFavoritesList: [],
      favoritesData: {},
      url: {
        list: '/articleFavoritesSub/list',
        cancelCollection: '/articleFavoritesSub/delete',
        edit: '/articleFavorites/edit',
        delete: '/articleFavorites/delete'
      },
      loading: false,
      showList: true,
      showFavoritesName: true,
      showArticleDescribe: true,
      favoritesName: '',
      articleDescribe: '',
      isCheckbox: false,
      moveSelectKeys: []
    }
  },
  mounted() {
  },
  methods: {
    // 根据点击收藏夹切换
    getFavoritesList(favoritesData) {
      this.isCheckbox = false
      this.loading = true
      this.favoritesData = favoritesData
      getAction(this.url.list, { mainId: favoritesData.id }).then(res => {
        if (res.success) {
          this.loading = false
          this.articleFavoritesList = res.result.records
          this.showList = false
          this.$nextTick(() => {
            this.showList = true
          })
        }
      })
    },
    // 点赞/收藏   1：收藏；2：点赞
    cancelCollection(articleId) {
      const params = {
        'articleId': articleId
      }
      deleteAction(this.url.cancelCollection, params).then(res => {
        if (res.success) {
          this.loading = true
          this.getFavoritesList(this.favoritesData)
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 修改收藏夹名称/修改收藏夹描述
    clickFavoritesName(favoritesData) {
      putAction(this.url.edit, favoritesData).then(res => {
        if (res.success) {
          this.showFavoritesName = true
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //
    clickrticleDescribe(favoritesData) {
      putAction(this.url.edit, favoritesData).then(res => {
        if (res.success) {
          this.showArticleDescribe = true
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 删除收藏夹
    deleteFavorites(id) {
      if (this.articleFavoritesList.length === 0) {
        deleteAction(this.url.delete, { id: id }).then(res => {
          if (res.success) {
            this.$emit('deleteFavoritesOk')
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.error('存在收藏内容，请移动当前收藏内容至其他收藏夹！')
      }
    },
    onChange(id) {
      if (this.moveSelectKeys.indexOf(id) === -1) {
        this.moveSelectKeys.push(id)
      } else {
        this.moveSelectKeys.splice(this.moveSelectKeys.indexOf(id), 1)
      }

    },
    moveFavorites() {
      if (this.moveSelectKeys.length !== 0) {
        this.$refs.MoveFavoritesModal.mainId = this.favoritesData.id
        this.$refs.MoveFavoritesModal.click(this.moveSelectKeys)
      } else {
        this.$message.info("请选择要移动的文件！")
      }

    },
    noMove() {
      this.moveSelectKeys = []
      this.isCheckbox = !this.isCheckbox
    },
    moveFavoritesOk() {
      this.getFavoritesList(this.favoritesData)
      this.$emit('moveFavoritesOkRef')
    }
  }
}
</script>

<style scoped>
.MyFavoritesList {
  margin: 10px 20px;
  border: #e8e8e8 1px solid;
  border-radius: 5px;
  padding: 10px 20px;
}

.MyFavoritesList:hover {
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
}
</style>
